<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1">
	<base target="_blank">
	<title>(っ °Д °;)っ</title>
	<link rel="stylesheet" href="/utils/style.css">
	<script async src="/utils/stat.js"></script>
	<script defer src="/utils/main.js"></script>
	<style>
		html,
		body {
			max-width: 100vw;
			overflow: hidden;
		}

		.upload {
			width: 80vw;
			max-width: 500px;
			display: inline-flex;
			justify-content: center;
		}

		#stage {
			transform: matrix(0.6, 0, 0, 0.6, 0, -150);
			line-height: 1em;
			font-family: monospace;
			white-space: pre-wrap;
			margin-left: -1000%;
			margin-right: -1000%;
			pointer-events: none;
		}
	</style>
</head>

<body>
	<div class="main">
		<h1 class="title"></h1>
		<p class="info"></p>
		<div class="upload">
			<input id="upload" type="file" accept="video/*">
			<label id="control" for="upload">选择视频</label>
			<input type="text" style="width:0;flex-grow:1;flex-shrink:1;pointer-events:none" id="filename">
			<input type="button" value="重置" onclick="location.reload(true)">
		</div>
		<p>视频信息：<strong id="info" class="accept"></strong><strong id="fps" class="accept"></strong></p>
		<div id="hide" class="hide">
			<p> 字符画参数设置：<input id="show" type="button"> </p>
			<div id="inf">
				<p>
					<input type="checkbox" id="inverse">
					<label for="inverse">反色</label>
					<input type="checkbox" id="flash">
					<label for="flash">频闪(反色时不可用)</label>
				</p>
			</div>
			<input id="play" type="button" value="播放">
			<div id="stage"></div>
		</div>
	</div>
	<noscript><strong style="color:#f00">此浏览器不支持JavaScript，该脚本无法运行。</strong></noscript>
	<script src="./script.js"></script>
</body>

</html>